import React, { useState, useEffect, useRef, useMemo, Fragment } from "react"
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { getHotCity, getAllCity } from "../../api";
import { CHANGE_CITY } from "../../constans/types";
import { Toast, NavBar, Icon, } from "antd-mobile";
import { List } from 'react-virtualized'
import styles from './index.module.scss'
const CitySelect = () => {
  const [cityListData, setCityList] = useState([]);
  const [letterList, setLetterList] = useState([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const dispatch = useDispatch();
  const ListRef = useRef(null)
  const history = useHistory()
  useEffect(() => {
    crateCityList()
  }, [])
  const crateCityList = async () => {
    let cityList = [];
    cityList.push({
      title: '当前城市',
      children: [{ cityName: '广州', value: '11' }]
    })
    const hotCity = await getHotCity();
    cityList.push({
      title: '热门城市'
      , children: hotCity.map(v => ({ cityName: v.label, value: v.short }))
    });
    const allCity = await getAllCity();
    allCity.sort((a, b) => a.short > b.short ? 1 : -1);
    let firstLetter = ''
    allCity.forEach(v => {
      firstLetter = v.short.charAt(0).toUpperCase();
      const index = cityList.findIndex(item => item.title === firstLetter);
      if (index === -1) {
        cityList.push({
          title: firstLetter, children: [{ cityName: v.label, value: v.value }]
        })
      } else {
        cityList[index].children.push({ cityName: v.label, value: v.value })
      }
    })
    const letterList = cityList.map(v => v.title);
    letterList.splice(0, 2, '#', '热');
    setCityList(cityList);
    setLetterList(letterList);
    ListRef.current.measureAllRows()
  }
  const changeCity = (cityName) => {
    const hotCityList = cityListData[1].children;
    const i = hotCityList.findIndex(v => v.cityName === cityName);
    if (i !== -1) {

      dispatch({
        type: CHANGE_CITY,
        value: hotCityList[i].cityName
      })
      history.go(-1)
    } else {
      Toast.info('城市还在建设中...', 1)
    }
  }
  const rowRenderer = ({ key, index, style }) => {


    const item = cityListData[index]
    return <div key={key} style={style}>
      <div className={styles.row_title}>{item.title}</div>{
        item.children.map(v => {
          return <div key={v.value} className={styles.row_children} onClick={() => changeCity(v.cityName)}>{v.cityName}</div>
        })
      }
    </div>
  }
  const { width, height } = useMemo(() => {
    const { width, height } = window.screen;
    return {
      width,
      height
    }
  }, [])

  const rowHeight = ({ index }) => {
    return 40 + cityListData[index].children.length * 40
  }
  const onRowsRendered = ({ startIndex }) => {
    if (startIndex !== activeIndex) {
      setActiveIndex(startIndex)
    }
  }
  return <Fragment >
    <NavBar icon={<Icon type='left' />} onLeftClick={() => {
      history.go(-1)
    }} >城市选择</NavBar>
    <div className={styles.letter_list}>
      {
        letterList.map((v, i) => {
          return <span key={v} className={i === activeIndex ? styles.active : ""} onClick={() => {
            setActiveIndex(i)
            ListRef.current.scrollToRow(i)
          }}>{v}</span>
        })
      }
    </div>
    <List width={width}
      height={height - 45}
      rowCount={cityListData.length}
      rowHeight={rowHeight}
      rowRenderer={rowRenderer}
      scrollToAlignment='start'
      onRowsRendered={onRowsRendered} ref={ListRef} />
  </Fragment>
}
export default CitySelect